<template>
  <view>
		<!-- <button type="default" @click="getLocation()">获取用户信息</button> -->
		<!-- <text>{{positionName}}</text> -->
		<uni-notice-bar speed="7" scrollable="true" single="true" :text='text'></uni-notice-bar>
		<!-- 滑块 -->
		<view class="cu-bar bg-white">
			<view class="action sub-title">
				<text class="text-xl text-bold text-green">热销菜品</text>
				<text class="bg-green" style="width:2rem"></text>
				<!-- last-child选择器-->
			</view>
		</view>
		<view class="you_may_also_like">
			<scroll-view class="scroll" scroll-x scroll-with-animation @scroll="scroll" scroll-left="120">
				<view class="you_may_also_like">
					<view class="" v-for="(item,index) in TodaysDishes" :key="index" @click="TodaysDishesID(item.id)">
						<view class="dish_image">
							<image :src="htp + item.itemImg"></image>
						</view>
						<view class="dish_title text-ml text-bold">
							{{item.itemName}}
						</view>
						<view class="dish_title_buttom">
							<view class="dish_title_left_top text-red">
								<image src="../../static/rexiao.png.png" mode=""></image>
								<text class="text-red">热销:</text>{{item.totalNumber}}
							</view>
							<text class="text-red">
								<text class="text-red text-price"></text>{{item.itemPrice}}
							</text>
						</view>
						<view class="dish_title_buttom">
							<text class="dish_title_left_buttom">
								<text class="">库存:</text>{{item.def1}}<text class=""></text>
							</text>
							<text class="dish_title_right text-red">
								<!-- <text class="text-red text-price"></text>{{item.itemPrice}} -->
							</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
			<view class="cu-item" v-for="(item,index) in cuIconList" :key="index" @click="cuList(item.url)">
				<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
					<view class="cu-tag badge" v-if="item.badge!=0">
						<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
					</view>
				</view>
				<text class="no-bordertext">{{item.name}}</text>
			</view>
		</view>
		<swiper :autoplay="true" :interval="6000" :duration="3000">
			<swiper-item v-for="(item,index) in 5" :key="index">
				<view class="slider_swiper">
					<image src="../../static/images/template.jpg" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="cu-bar bg-white">
			<view class="action sub-title">
				<text class="text-xl text-bold text-green">猜你喜欢</text>
				<text class="bg-green" style="width:2rem"></text>
				<!-- last-child选择器-->
			</view>
		</view>
		<view v-if="youMayAlsoLike == ''" class="hei">
			<view class="text-grey">
				快去下单，下单完成后才有猜你喜欢哦.........
			</view>

		</view>
		<view v-else class="youMayAlsoLike_botton">
			<view class="" v-for="(item,index) in youMayAlsoLike" :key="index" @click="TodaysDishesID(item.id)">
				<view class="youMayAlsoLikeData">
					<view class="dish_image">
						<image :src="htp + item.itemImg"></image>
					</view>
					<view class="youMayAlsoLike_right">
						<view class="text_xl text-bold text_left">
							{{item.itemName}}
						</view>
						<view class="dish_title_buttom">
							<text class="dish_title_left text-red">
								<text class="text-red">热销:</text>{{item.totalNumber}}
							</text>
						</view>
						<view class="dish_title_buttom">
							<text class="">
								<text class="">库存:</text>{{item.def1}}
							</text>
						</view>
						<view class="dish_title_buttom_text">
							<text class="dish_title_right text-red">
								<text class="text-red text-price"></text>{{item.itemPrice}}
							</text>
							<view class="youMayAlsoLike_right_button">
								<button class="cutn round bg-green shadow" @tap="emptyShoppingCart">查看详情</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<validateLogin></validateLogin>
	</view>
</template>

<script>
	import validateLogin from '../../components/validateLogon.vue'
	import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue'
	import { mapState } from 'vuex'
	var rawData, _that;
	const chooseLocation = requirePlugin('chooseLocation');
	export default {
		components: {
			uniNoticeBar,
			validateLogin,
		},
		data() {
			return {
				i: 0,
				isClick: true,
				positionName: '',
				opid: null,
				youMayAlsoLike: '', // 猜你喜欢
				text: '', //今日菜品播报
				scrollTop: 0, //滚动事件
				old: {
					scrollTop: 0
				},
				TodaysDishes: [], // 今日菜品
				TabCur: 0,
				scrollLeft: 0,
				modalName: null,
				gridCol: 3,
				gridBorder: false,
				menuBorder: false,
				menuArrow: false,
				menuCard: false,
				skin: false,
				listTouchStart: 0,
				listTouchDirection: null,
				cuIconList: [{
					url: '../Order/orders',
					cuIcon: 'shopfill',
					color: 'red',
					badge: 0,
					name: '订餐下单'
				}, {
					url: '../Home/Refund',
					cuIcon: 'newshotfill',
					color: 'blue',
					badge: 0,
					name: '订单详情'
				}, {
					url: 'new_file',
					cuIcon: 'recordfill',
					color: 'orange',
					badge: 1,
					name: '视频'
				}, {
					url: '../Order/reserve',
					cuIcon: 'cuIcons',
					color: 'white',
					badge: 0,
					name: '预购下单'
				}, {
					url: 'flase',
					cuIcon: 'noticefill',
					color: 'olive',
					badge: 22,
					name: '通知'
				}, {
					url: 'flase',
					cuIcon: 'upstagefill',
					color: 'cyan',
					badge: 0,
					name: '排行榜'
				}],

			};
		},
		created() {
			
		},
		onShow() {
			this.selectLickRestItem(); //猜你喜欢	
			// const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
			// this.positionName = location.name
		},
		onLoad(options) {
			// this.getLocations();
			this.selectRestItem(); //获取今日数据	
			this.broadcast(); //今日菜品播报
		},
		onUnload() {
			// 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
			// chooseLocation.setLocation(null);
		},
		onPullDownRefresh() {
			this.selectLickRestItem(); //猜你喜欢	
			// wx.startPullDownRefresh()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		//转发 来自页面内按钮分享
		onShareAppMessage(res) {
			if (res.from === 'button') {}
			return {
				path: '/pages/index/index', //这是为了传参 onload(data){let id=data.id;}
				title: "分享",
				imageUrl: ""
			}
		},
		computed:{
			...mapState(['id','openid','htp'])
		},
		methods: {
			// getLocation() {
			// 	wx.getLocation({
			// 		type: 'wgs84',
			// 		success: function(res) {
			// 			console.log("获取位置")
			// 			console.log(res)
			// 			var latitude = res.latitude
			// 			var longitude = res.longitude
			// 			var speed = res.speed
			// 			var accuracy = res.accuracy
			// 			console.log(latitude);
			// 			console.log(longitude);
			// 			let locationa = latitude + ',' + longitude
			// 			uni.request({
			// 				url: 'https://apis.map.qq.com/ws/geocoder/v1/', //仅为示例，并非真实接口地址。
			// 				data: {
			// 					location: locationa,
			// 					get_poi: '1',
			// 					key: 'RBXBZ-ZZTCP-OAVD2-LN3YH-BR35H-CGFAP',
			// 					output:'json'
			// 				},
			// 				success: (res) => {
			// 					console.log(res);
			// 				}
			// 			});
			// 			// const key = 'O2FBZ-DPG3W-RDURL-RTCNG-NPHPJ-D2BWH'; //使用在腾讯位置服务申请的key
			// 			// const referer = '食盒记订餐'; //调用插件的app的名称
			// 			// const location = JSON.stringify({
			// 			// 	latitude: latitude,
			// 			// 	longitude: longitude
			// 			// });
			// 			// const category = '生活服务,娱乐休闲';

			// 			// wx.navigateTo({
			// 			// 	url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&location=${location}&category=${category}`
			// 			// });
			// 		}
			// 	})
			// },
			// getLocations() {
			// 	wx.getSetting({
			// 		success(res) {
			// 			if (!res.authSetting['scope.userLocation']) {
			// 				wx.authorize({
			// 					scope: 'scope.userLocation',
			// 					success() {
			// 						// 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问

			// 					}
			// 				})
			// 			}
			// 		}
			// 	})
			// },
			//获取今日数据		
			async selectRestItem() {
				await this.request.selectRestItem().then(res => {
					this.TodaysDishes = res.rows
				})
			},
			//猜你喜欢
			async selectLickRestItem() {
				await this.request.selectLickRestItem({
					oppenId: this.openid
				}).then(res => {
					this.youMayAlsoLike = res.rows
				})
			},
			//今日菜品播报
			async broadcast() {
				await this.request.broadcast().then(res => {
					let text = res.join(",")
					this.text = text.toString()
				})
			},
			cuList(url) {
				if (url == "flase") {
					uni.showModal({
						title: "暂未开放"
					})
					return false
				}
				uni.navigateTo({
					url: url
				})
			},
			//跳转详情页
			TodaysDishesID(id) {
				uni.navigateTo({
					url: '../Details/Dishesx?id=' + id
				})
			},
			//滚动事件
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			// teb 导航
			tabSelect(e) {
				// console.log(e)
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},

			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},

			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null

			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
	// after
	.cuIcon-cuIcons:before {
		line-height: 10rpx;
		background-color: #fbbd08;
		border-radius: 10rpx;
		font-size: 78rpx;
		padding: 10rpx;
		content: "预";
	}
	.cu-list.grid>.cu-item [class*=cuIcon] {
		position: relative;
		display: block;
		margin-top: 20upx;
		width: 100%;
		font-size: 88upx
	}

	.youMayAlsoLike_botton {
		background-image: linear-gradient(#FFFFFF 5%, #f1f1f1 95%);
	}

	button {
		margin: 0;
		padding: 0;
		outline: none;
		border-radius: 0;
		background-color: transparent;
		line-height: inherit;
		width: max-content;
	}

	button:after {
		border: none;
	}

	.dish_title {
		text-align: center;
	}

	.dish_title_right {
		display: block;
		width: 57rpx;
	}

	.dish_title_left {
		margin-right: 73rpx;
		display: block;
	}

	.dish_title_left_top {
		padding-left: -86rpx;
		display: flex;
		align-items: center;
	}

	.dish_image {
		text-align: center;
		width: 300rpx;
		height: 200rpx;

		image {
			width: 100%;
			height: 200rpx;
			border-radius: 25rpx;
		}

	}

	.you_may_also_like {

		display: flex;

	}

	.you_may_also_like>view {
		margin: 5px;
		width: 352rpx;
		height: 370rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.dish_title_buttom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 272rpx;

		image {
			display: list-item;
			width: 30rpx;
			height: 30rpx;
		}
	}

	.dish_title_buttom_text {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	}

	.slider_swiper {
		padding: 20rpx;
		width: 750rpx;
		height: 300rpx;

		image {
			border-radius: 20rpx;
			width: 100%;
			height: 100%;
		}
	}

	.page {

		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}

	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}

	button .cu-tag {
		position: absolute;
		top: 8upx;
		right: 8upx;
	}

	.hei {
		display: flex;
		justify-content: center;

		text-align: center;
		height: 500rpx;
	}

	.dish_title_left_buttom {
		width: auto;
		margin-left: 30rpx;
	}

	.dish_title_buttom_left {
		width: auto;
		margin-left: 36rpx;
	}

	text {
		color: #8799a3
	}

	.no-bordertext:nth-child(1) {
		color: #FF0000
	}

	.youMayAlsoLikeData {
		display: flex;
		align-items: center;
		margin: 13rpx 12rpx;
		border-radius: 25rpx;
		background: #FFFFFF;
	}

	.youMayAlsoLike_right {
		height: 210rpx;
		margin-left: 16rpx;
		width: 385rpx;
	}

	.youMayAlsoLike_right view {
		margin: 5rpx 0;
	}

	.youMayAlsoLike_right view:nth-child(1) {
		height: 35rpx;
		margin-bottom: 20rpx;
	}

	.youMayAlsoLike_right view:nth-last-child(1) {
		margin-top: 2rpx;
	}

	.cutn {
		padding: 10rpx;
		height: 49rpx;
		width: 204rpx;
		border-radius: 10rpx;
		font-size: 30rpx;
		line-height: 30rpx;
		border-radius: 10rpx;
	}

	.text_xl {
		font-size: 32rpx;
	}
</style>
